import { getQuestionTypeApi } from '@/api'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import SelectGrid from './components/SelectGrid'
import './select.less'
import { Button } from 'antd-mobile'
import { QuetionTypeMap } from '@/common'

const testTypes = [
    { text: '全部', value: 'all' },
    { text: '未做', value: 'notdone' },
    { text: '已做', value: 'done' },
    { text: '错误', value: 'err' },
]

const testNums = [
    { text: '5', value: '5' },
    { text: '10', value: '10' },
    { text: '20', value: '20' },
    { text: '50', value: '50' },
    { text: '100', value: '100' },
]

// 在ts里面，为了规范类型的约束，如果一个对象可以使用任意的 键来访问属性
// 无法确定该键是否存在
// const obj = {
// }
// obj['name']
// 但是在某些情况下， 我们就是想让一个对象可以使用任意键访问数据，可以告诉它，使用索引器
interface KeyMap {
    // [索引:索引的类型]:通过索引得到数据的类型
    [index: string]: string;
}
// 当前这个interface KeyMap 其实可以在多个地方用到，可以放到 .d.ts 里面，但是为了让大家吸收，我先不放，你们知道应该要放在.d.ts里面就行

// const QuetionTypeMap: KeyMap = {
//     all: '全部',
//     qa: '问答',
//     code: '编程',
//     one: '单选',
//     check: '判断',
//     many: '多选',
//     fill: '填空'
// }

export default function Select() {
    // 此时这个id其实是 actionCode
    const { id } = useParams()
    // 这个是之前想让大家明白，请求回来的数据是需要渲染的，才添加的 useState
    // const [list, setList] = useState<QuetionTypeModel[]>()


    // 当前是我们自己处理过的 在 中间 的 SelectGrid 组件里面要传入的数据
    const [list, setList] = useState<ISelectGridData[]>([])

    const navigate = useNavigate()

    useEffect(() => {
        // 下面两个写法都是把 id 可能是undefined的定义去除，告诉ts，id一定有
        // getQuestionTypeApi(id!).then(res=>{
        getQuestionTypeApi(id as string).then(res => {
            if (res.errCode == 0) {
                // 赋值渲染
                // setList(res.data);

                // 现在 res.data 后端返回的数据不满足我们想要，此时只能自己处理一下
                // const key = res.data[0].key // all , qa , code ,one , ...
                // const text = QuetionTypeMap[key]  // 英文对应的中文
                // // 想要的对象
                // const obj = {
                //     value: key,
                //     text,
                // }
                // // 我们想传入中间这个 SelectGrid 组件里面的数据
                // let arr = [obj,obj2,obj3]
                // 上面就是我们转换的过程
                // 所以接下来，我们遍历 res.data , 生成 中间的 SelectGrid 组件需要的数据
                const result = res.data.map(item => {
                    const key = item.key
                    const text = QuetionTypeMap[key] + item.value
                    return {
                        text, value: key
                    }
                })
                setList(result)
            }
        })

    }, [])

    // 在跳转到下一个页面需要的多个参数
    let testNum: number = 5;
    let testType: string = 'all';
    let questionType: string = 'all';

    return (
        <div className='select'>
            <div className='entry'>
                <Button color="primary" onClick={() => navigate('/practice', {
                    state: {
                        actionCode: id, testNum, testType, questionType
                    }
                })}>进入练习模式</Button>
                <Button color="warning">进入考试模式</Button>
            </div>
            <SelectGrid title='试题分类' list={testTypes} onChange={(val) => testType = val} />
            <SelectGrid title='题目分类' list={list} onChange={(val) => questionType = val} />
            <SelectGrid title='题目数量' list={testNums} onChange={(val) => testNum = parseInt(val)} />
        </div>
    )
}
